<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>权限管理-总控后台</title>
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="../layui/css/layui.css">
	</head>

	<body>
		<div style="padding: 15px;">
			<!-- 页面内容 Start -->
			<blockquote class="layui-elem-quote layui-text">
				权限列表
			</blockquote>
			<div class="layui-card layui-panel">
				<div class="layui-card-body">
					<table class="layui-hide" id="auth-tree"></table>
				</div>
			</div>
			<!-- 页面内容 End -->
		</div>
		<script type="text/html" id="auth-treeTable">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm layui-bg-orange" lay-event="addChild">添加权限</button>
			</div>
		</script>
		<script type="text/html" id="auth-treeTable-tools">
			<div class="layui-clear-space">
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="detail">查看</a>
			</div>
		</script>
		<script src="../layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(function() {
				var treeTable = layui.treeTable;
				var layer = layui.layer;
				var dropdown = layui.dropdown;
				// 渲染
				var inst = treeTable.render({
					elem: '#auth-tree',
					url: './auth.json', // 此处为静态模拟数据，实际使用时需换成真实接口
					// method: 'post',
					maxHeight: '501px',
					toolbar: '#auth-treeTable',
					customName: {
						pid: 'parent_id',
						name: 'title'
					},
					view: {
						showIcon: true
					},
					defaultToolbar: [],
					cols: [
						[{
								type: 'checkbox',
								fixed: 'left'
							},
							{
								field: 'id',
								title: 'ID',
								width: 80,
								fixed: 'left'
							},
							{
								field: 'title',
								title: '标题',
								width: 180,
								fixed: 'left'
							},
							{
								field: 'type',
								title: '类型',
								width: 80,
							},
							// {
							// 	field: 'icon',
							// 	title: '图标',
							// 	width: 90,
							// },
							{
								field: 'checkk',
								title: '检查权限',
								width: 100
							},
							{
								fixed: "right",
								title: "操作",
								width: 190,
								align: "center",
								toolbar: "#auth-treeTable-tools"
							}
						]
					],
					page: true
				});
				// 表头工具栏工具事件
				treeTable.on("toolbar(auth-tree)", function(obj) {
					var config = obj.config;
					var tableId = config.id;
					var status = treeTable.checkStatus(tableId);
					// 获取选中行
					if (obj.event === "addChild") {
						layer.open({
							type: 2,
							area: ['80%', '80%'],
							content: './edit.html',
							fixed: false, // 不固定
							maxmin: true,
							shadeClose: true,
							title: false

						});
						// window.location.href = "./edit.html";
					}
				});

				// 单元格工具事件
				treeTable.on('tool(' + inst.config.id + ')', function(obj) {
					var layEvent = obj.event; // 获得 lay-event 对应的值
					var trElem = obj.tr;
					var trData = obj.data;
					var tableId = obj.config.id;
					if (layEvent === "detail") {
						layer.msg("查看操作：" + trData.title);
					} else if (layEvent === "edit") {
						layer.open({
							type: 2,
							area: ['80%', '80%'],
							content: './edit.html?id=' + trData.id,
							fixed: false, // 不固定
							maxmin: true,
							shadeClose: true,
							title: false
						
						});
						// window.location.href = "./edit.html";
					}
				});
			});
		</script>

	</body>
</html>